<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: '#fff' }"
      border-bottom
      id="nav-bar"
      title="个人资料"
      :custom-back="customBack"
    ></u-navbar>

    <view class="form-box">
      <view class="form-box-in">
        <u-form :model="form" ref="uForm" :label-width="200">
          <u-form-item label="头像">
            <u-upload
              ref="avatarRef"
              :action="action"
              :max-count="1"
              :auto-upload="true"
              :custom-btn="true"
              width="122"
              height="122"
              @on-uploaded="onUploadedAvatar"
              @on-remove="onRemoveAvatar"
            >
              <view
                slot="addBtn"
                class="avatar"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image
                  class="customBtn"
                  :src="`${
                    formModel.avatar
                      ? 'https://file.diqihengrun.com/image' + formModel.avatar
                      : '/static/images/icon-rx.png'
                  } `"
                ></image>
              </view>
            </u-upload>
          </u-form-item>
          <u-form-item label="真实姓名">
            <u-input
              v-model="form.name"
              :disabled="disabled"
              placeholder="请输入您的真实姓名"
            />
          </u-form-item>
          <u-form-item label="身份证号码">
            <u-input
              v-model="form.idCard"
              :disabled="disabled"
              placeholder="请输入您的身份证号"
            />
          </u-form-item>
          <u-form-item label="手机号">
            <view class="phoneBox">
              <u-input
                v-model="form.phone"
                :disabled="disabled"
                placeholder="请输入您的手机号"
              />
              <view class="changeBtn" @click="changePhone">更换</view>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view>
</template>
<script>
import service from '@/common/service.js';
import util from '@/common/utils.js';

export default {
  data() {
    return {
      formModel: {
        name: '',
        idCard: '',
        phone: '',
        avatar: '',
      },
      disabled: false,
      loading: false,
      isEditing: false,
      action: 'https://file.diqihengrun.com/FileManage/Upload',
    };
  },
  onLoad() {
    this.getMyInfo();
  },
  methods: {
    customBack() {
      uni.switchTab({
        url: '/pages/my/index',
      });
    },
    getMyInfo() {
      const that = this;
      const param = {};
      that.loading = true;
      util.showLoading();
      getMemberInfo(param)
        .then((res) => {
          if (res && res.data) {
            const { data } = res;
            that.form.name = data.realName || '';
            that.form.idCard = data.idCard || '';
            that.form.phone = data.phone || '';
            that.form.avatar = data.avatar || '';
            if (!data.isEdit) {
              that.disabled = true;
            } else {
              that.disabled = false;
            }
          } else {
            that.disabled = false;
          }
          that.loading = false;
          util.hideLoading();
        })
        .catch(() => {
          that.loading = false;
          util.hideLoading();
        });
    },
    onUploadedAvatar(lists, name) {
      let filePath = lists[0].response.data[0].filePath;
      this.formModel.avatar = filePath;
    },
    onRemoveAvatar(index, lists, name) {
      this.formModel.avatar = '';
    },
    changePhone(){
      uni.navigateTo({
        url:'/pages/my/changePhone',
      })
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: center;
  background-color: #f7f7f7;
}

.form-box {
  width: 100%;
  padding: 30rpx;
  .form-box-in {
    position: relative;
    padding: 0 26rpx;
    background: #ffffff;
    border-radius: 10rpx;
    .phoneBox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .changeBtn {
        padding-left: 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #b7926e;
        line-height: 60rpx;
        text-align: right;
      }
    }
  }
}

.avatar {
  width: 122rpx;
  height: 122rpx;
  border-radius: 50%;
  .customBtn {
    width: 100%;
    height: 100%;
  }
}
</style>
